<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>院校与企业 - 职微云职</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/institutions.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2553510_mzcpwhirgdh.css"> <!-- 使用阿里图标库 -->
    <link rel="preconnect" href="https://source.unsplash.com"> <!-- 预连接图片服务 -->
</head>
<body class="loading">
    <!-- 页面头部 -->
    <header class="header">
        <div class="header-container">
            <a href="../index.html" class="logo">
                <img src="../images/logo.png" alt="职微云职" class="logo-img">
                <div class="location-info" id="user-location">
                    <i class="iconfont icon-location location-icon"></i>
                    <span class="location-text">定位中...</span>
                </div>
            </a>
            <div class="search-bar">
                <input type="text" class="search-input" placeholder="搜索院校或企业...">
                <div class="search-btn">
                    <i class="iconfont icon-search"></i>
                </div>
            </div>
            <div class="user-info">
                <div class="avatar">
                    <img src="../images/avatar.jpg" alt="用户头像">
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="main-content">
        <!-- 分类标签切换 -->
        <div class="category-tabs">
            <div class="tab active" data-target="schools">院校</div>
            <div class="tab" data-target="companies">企业</div>
        </div>

        <!-- 院校筛选器 -->
        <div id="school-filter" class="filter-bar active">
            <div class="filter-item">
                <label>地区:</label>
                <select class="filter-select" name="region">
                    <option value="all">全部</option>
                    <option value="north">华北</option>
                    <option value="east">华东</option>
                    <option value="south">华南</option>
                    <option value="central">华中</option>
                    <option value="southwest">西南</option>
                    <option value="northwest">西北</option>
                    <option value="northeast">东北</option>
                </select>
            </div>
            <div class="filter-item">
                <label>类型:</label>
                <select class="filter-select" name="type">
                    <option value="all">全部</option>
                    <option value="comprehensive">综合类</option>
                    <option value="engineering">理工类</option>
                    <option value="normal">师范类</option>
                    <option value="agriculture">农林类</option>
                    <option value="medicine">医药类</option>
                    <option value="finance">财经类</option>
                    <option value="language">语言类</option>
                    <option value="art">艺术类</option>
                </select>
            </div>
            <div class="filter-item">
                <label>特征:</label>
                <select class="filter-select" name="feature">
                    <option value="all">全部</option>
                    <option value="985">985</option>
                    <option value="211">211</option>
                    <option value="double-first">双一流</option>
                </select>
            </div>
        </div>

        <!-- 企业筛选器 -->
        <div id="company-filter" class="filter-bar">
            <div class="filter-item">
                <label>地区:</label>
                <select class="filter-select" name="region">
                    <option value="all">全部</option>
                    <option value="north">华北</option>
                    <option value="east">华东</option>
                    <option value="south">华南</option>
                    <option value="central">华中</option>
                    <option value="southwest">西南</option>
                    <option value="northwest">西北</option>
                    <option value="northeast">东北</option>
                </select>
            </div>
            <div class="filter-item">
                <label>行业:</label>
                <select class="filter-select" name="type">
                    <option value="all">全部</option>
                    <option value="internet">互联网</option>
                    <option value="finance">金融</option>
                    <option value="hardware">硬件制造</option>
                    <option value="software">软件开发</option>
                    <option value="consulting">咨询</option>
                    <option value="education">教育</option>
                    <option value="service">服务业</option>
                </select>
            </div>
            <div class="filter-item">
                <label>规模:</label>
                <select class="filter-select" name="size">
                    <option value="all">全部</option>
                    <option value="large">10000人以上</option>
                    <option value="medium">1000-9999人</option>
                    <option value="small">500-999人</option>
                    <option value="micro">500人以下</option>
                </select>
            </div>
        </div>

        <!-- 视图选项 -->
        <div class="view-options">
            <div class="view-toggle">
                <div class="view-btn active" data-view="grid">
                    <i class="iconfont icon-grid"></i>
                </div>
                <div class="view-btn" data-view="list">
                    <i class="iconfont icon-list"></i>
                </div>
            </div>
            <div class="sort-options">
                <div class="sort-option active" data-sort="recommend">推荐</div>
                <div class="sort-option" data-sort="hot">热门</div>
                <div class="sort-option" data-sort="latest">最新</div>
            </div>
        </div>

        <!-- 院校列表 -->
        <div id="school-list" class="institutions-list active">
            <!-- 加载动画 -->
            <div class="loading-spinner"></div>
            
            <!-- 动态加载院校数据 -->
        </div>

        <!-- 企业列表 -->
        <div id="company-list" class="institutions-list">
            <!-- 加载动画 -->
            <div class="loading-spinner"></div>
            
            <!-- 动态加载企业数据 -->
        </div>

        <!-- 无结果状态 -->
        <div class="no-results">
            <i class="iconfont icon-empty"></i>
            <p>暂无符合条件的结果</p>
            <button class="retry-btn">重新加载</button>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <nav class="tab-bar">
        <div class="tab" data-target="../index.html">
            <i class="iconfont icon-home"></i>
            <span>首页</span>
        </div>
        <div class="tab" data-target="../pages/discover.html">
            <i class="iconfont icon-discover"></i>
            <span>发现</span>
        </div>
        <div class="tab active" data-target="../pages/institutions.html">
            <i class="iconfont icon-school"></i>
            <span>院校企业</span>
        </div>
        <div class="tab" data-target="../pages/profile.html">
            <i class="iconfont icon-user"></i>
            <span>我的</span>
        </div>
    </nav>

    <!-- 引入JavaScript文件 -->
    <script src="../js/institutions.js"></script>
</body>
</html> 